<template>
    <div>
        <el-dialog
                title="新建报价"
                :visible.sync="dialogshow"
                :before-close="dialogClose"
                style="display: none"
                top="10vh"
                width="90%"
                :fullscreen="fullscreen"
        >
            <dialog-tools
                    v-bind:back="true"
                    v-bind:next="true"
                    v-bind:goback="true"
                    v-bind:prev="true"
                    v-bind:screen="true"
                    @clickfullscreen="clickfullscreen"
            >
            </dialog-tools>
            <el-tabs
                    class="tabs-table customer-tabs"
                    type="border-card"
            >
                <el-tab-pane label="基本信息">
                    <el-form
                            size="mini"
                            :model="customer"
                            label-width="100px"
                    >
                        <el-row class="item-w230">

                            <el-form-item label="订单单号" prop="name">
                                <el-input
                                        v-model="customer.name"
                                        auto-complete="off"
                                        class="clientName"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="客户名称">
                                <el-input
                                        v-model="customer.customercode"
                                        auto-complete="off"
                                        @click.native="handleButtons(2)"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="客户代码" prop="customercate">
                                <el-input
                                        v-model="customer.bankaccount"
                                        auto-complete="off"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="联系人" prop="creditrank">
                                <el-input
                                        v-model="customer.certificateno"
                                        auto-complete="off"
                                ></el-input>
                            </el-form-item>


                        </el-row>

                    </el-form>
                    <el-table
                            ref="multipleTable"
                            stripe
                            :data="tableData"
                            :show-summary="false"
                            border
                            height="500"
                            row-class-name="tableRow"
                            header-row-class-name="tableHeader"
                            :highlight-current-row="true"
                            @row-dblclick="handleButtons(22)"
                            style="width: 100%; border-top: 1px solid #c5c5c5"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="id" label="序号" sortable width="80">
                        </el-table-column>
                        <el-table-column prop="image" label="图片" width="120">
                            <template scope="scope">
                                <img
                                        :src="scope.row.image"
                                        width="40"
                                        height="40"
                                        class="head_pic"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column prop="wpmc" label="物品名称" sortable width="120">
                        </el-table-column>
                        <el-table-column prop="wppl" label="物品品类" sortable width="120">
                        </el-table-column>
                        <!-- <el-table-column prop="dw" label="单位" sortable width="80">
                        </el-table-column> -->
                        <el-table-column prop="number" label="数量" sortable width="80">
                        </el-table-column>
                        <el-table-column prop="price" label="价格" sortable width="120">
                        </el-table-column>
                        <el-table-column prop="kh" label="款号" sortable width="120">
                        </el-table-column>
                        <!-- <el-table-column prop="kh" label="库存" sortable width="120">
                        </el-table-column> -->
                        <el-table-column prop="ks" label="款式" sortable width="120">
                        </el-table-column>
                        <el-table-column prop="ggcc" label="规格尺寸" sortable width="120">
                        </el-table-column>
                        <el-table-column
                                prop="gjspl"
                                label="金属品类"
                                sortable
                                width="120"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="gjsys"
                                label="金属颜色"
                                sortable
                                width="120"
                        >
                        </el-table-column>
                        <el-table-column prop="zsmc" label="主石名称" sortable width="120">
                        </el-table-column>
                        <el-table-column prop="zsys" label="主石颜色" sortable width="120">
                        </el-table-column>
                        <el-table-column prop="fsmc" label="副石名称" width="120">
                        </el-table-column>
                        <el-table-column prop="fsys" label="副石颜色" width="120">
                        </el-table-column>
                        <el-table-column prop="cjr" label="创建人" width="120">
                        </el-table-column>
                        <el-table-column prop="create_time" label="创建时间" width="120">
                        </el-table-column>
                        <el-table-column prop="update_time" label="更新时间" width="120">
                        </el-table-column>
                        <el-table-column fixed="right" width="140">
                            <template slot="header">
                                <!-- <el-tooltip content="添加" placement="bottom">
                                  <el-button
                                    @click="handleButtons(23)"
                                    type="primary"
                                    icon="el-icon-plus"
                                    size="mini"
                                  >
                                  </el-button>
                                </el-tooltip> -->


                            </template>
                            <template>
                                <el-tooltip content="修改" placement="bottom">
                                    <el-button
                                            @click="handleButtons(22)"
                                            type="primary"
                                            icon="el-icon-edit-outline"
                                            size="mini"
                                    >
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="bottom">
                                    <el-button
                                            @click="dialogAdd"
                                            type="danger"
                                            icon="el-icon-delete"
                                            size="mini"
                                    >
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="详细信息" name="third"></el-tab-pane>
                <el-tab-pane label="备注信息" name="bs">
                    <el-input
                            type="textarea"
                            v-model="customer.name"
                            placeholder="备注"
                    ></el-input>

                    <el-divider></el-divider>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <!--        <el-dropdown style="float: left; margin-left: 15px">-->
                <!--          <el-button>-->
                <!--            关联数据<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                <!--          </el-button>-->
                <!--          <el-dropdown-menu slot="dropdown">-->
                <!--            <el-dropdown-item>设计图</el-dropdown-item>-->
                <!--            <el-dropdown-item>客来石</el-dropdown-item>-->
                <!--            <el-dropdown-item>客来金</el-dropdown-item>-->
                <!--            <el-dropdown-item>其它...</el-dropdown-item>-->
                <!--          </el-dropdown-menu>-->
                <!--        </el-dropdown>-->
                <el-button
                        style="float: left; margin-left: 15px"
                        @click="handleButtons(31)"
                        icon="el-icon-search"
                >查询导入
                </el-button
                >
                <el-button
                        style="float: left; margin-left: 15px"
                        @click="handleButtons(23)"
                        icon="el-icon-search"
                >新创
                </el-button
                >
                <el-button type="primary">打印</el-button>
                <!-- <el-button type="primary">订单预览</el-button> -->
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="dialogAdd">确定报价</el-button>
            </div>
        </el-dialog>

        <!-- <customer-genji
                    v-bind:dialogshow="dialogCustomerGenji"
                    @dialog_close="dialog_close_genji_customer"
            ></customer-genji> -->
        <dialog-search-customer
                v-bind:dialogshow="dialogSearchCustomer"
                @dialog_close="dialog_close_search_customer"
        ></dialog-search-customer>
        <dialog-search-product
                v-bind:dialogshow="dialogSearchProduct"
                @dialog_close="dialog_close_search_product"
        ></dialog-search-product>
        <baojia-add
                v-bind:dialogshow="dialogBaojiaAdd"
                @dialog_close="dialog_close_baojiaadd"
        ></baojia-add>
        <baojia-edit
                v-bind:dialogshow="dialogBaojiaEdit"
                @dialog_close="dialog_close_baojiaedit"
        ></baojia-edit>

        <search-product-and-baojia
                v-bind:dialogshow="dialogSearchProductAndBaojia"
                @dialog_close="dialog_close_search_productandbaojia"
        ></search-product-and-baojia>


    </div>
</template>

<style scoped>
    #customerDialog .el-form-item {
        width: 45%;
        float: left;
        margin-bottom: 5px;
    }

    #customerDialog .el-form-item:nth-child(odd) {
        float: right;
    }

    .el-dialog__body,
    .el-form {
        overflow: hidden;
    }

    #customerDetail .el-form {
        border: 1px solid #c5c5c5;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-form .item-w230 .el-form-item {
        width: 230px;
        float: left;
        margin-bottom: 5px;
    }

    .el-form .el-row {
        margin-bottom: 0px;
    }

    .el-form .el-form--label-top .el-form-item__label {
        padding-bottom: 0px;
    }

    .el-form .el-divider--horizontal {
        margin: 5px 0;
    }

    .td-lable,
    .td-info {
        display: inline-table;
        vertical-align: -webkit-baseline-middle;
    }

    .td-lable {
        text-align: right;
        width: 100px;
    }

    .td-info {
        margin-left: 20px;
    }

    ul {
        list-style-type: none;
    }

    ul span {
        display: inline-table;
        min-width: 200px;
    }

    .tabs-table td {
        height: 50px;
        border-bottom: 1px solid #dcdfe6;
    }

    .customer-tabs .el-tab-pane {
        height: 400px;
        overflow: auto;
        padding: 20px;
    }
</style>

<script>
  module.exports = {
    methods: {
      dialogAdd () {
        this.$confirm('是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      },
      dialogClose () {
        this.$emit('dialog_close', 1)
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
      //跟进
      dialog_close_genji_customer (val) {
        console.log(val)
        this.dialogCustomerGenji = false
      },
      dialog_close_search_customer (val) {
        console.log(val)
        this.dialogSearchCustomer = false
      },
      dialog_close_search_product (val) {
        console.log(val)
        this.dialogSearchProduct = false
      },
      dialog_close_baojiaedit (val) {
        console.log(val)
        this.dialogBaojiaEdit = false
      },
      dialog_close_baojiaadd (val) {
        console.log(val)
        this.dialogBaojiaAdd = false
      },
      dialog_close_search_productandbaojia (val) {
        console.log(val)
        this.dialogSearchProductAndBaojia = false
      },


      handleButtons (val) {
        console.log(2222)
        switch (val) {
          case 1:
            this.dialogSendMessage = true
            console.log(this.dialogSendMessage)
            break
          case 2:
            console.log(333)
            this.dialogSearchCustomer = true
            console.log(this.dialogSearchCustomer)
            break
          case 3:
            console.log(333)
            this.dialogSearchProduct = true
            console.log(this.dialogSearchProduct)
            break
          case 31:
            console.log(333)
            this.dialogSearchProductAndBaojia = true
            console.log(this.dialogSearchProductAndBaojia)
            break


          case 10:
            console.log(333)
            this.dialogCustomerInfo = false
            this.dialogCustomerGenji = true
            console.log(this.dialogCustomerGenji)
            break
          case 22: //编辑报价
            console.log('编辑报价')
            this.dialogBaojiaEdit = true
            console.log(this.dialogBaojiaEdit)
            break
          case 23: //编辑报价
            console.log('新建报价')
            this.dialogBaojiaAdd = true
            console.log(this.dialogBaojiaAdd)
            break
        }
      },
      addData () {
        this.tableDatas.push({
          edit: true,
        })
      },
      //确认添加
      confirmAdd (row) {
        row.edit = false
      },
      //修改
      editData (row) {
        row.edit = true
      },
      //删除
      deleteData (row, index) {
        this.tableDatas.splice(index, 1)
      },
    },
    props: ['dialogshow'],
    data () {
      return {
        dialogSearchProductAndBaojia: false,
        dialogBaojiaAdd: false,
        dialogBaojiaEdit: false,
        dialogSendMessage: false,
        dialogCustomerInfo: false,
        dialogCustomerGenji: false,
        // dialogshow:false,
        dialogSendMessage: false,
        // dialogCustomerInfo: false,
        // dialogCustomerGenji: false,
        dialogSearchCustomer: false,
        dialogSearchProduct: false,
        visibleadd: false,
        Sendmssages: {
          address: '',
          customercate: '',
          cate: '',
          nickname: '',
          creditrank: '',
          name: '',
        },

        tableData: [
          {
            id: '1',
            create_time: '2016-05-02 08:08:08',
            update_time: '2016-05-02 08:08:08',
            image: '/public/images/eh1.jpg',
            kfmc: '某珠宝公司',
            kflxr: '王先生',
            wpmc: '钻石戒指',
            spzt: '审批中',
            dw: '',
            number: '1',
            bjdh: 222,
            price: 20000,
            bjlx: '预算',
            wppl: '戒指',
            kh: 'WERWQE123',
            ks: '普通',
            wpdj: 'A类',
            dw: '件',
            gjsp: '铂金999.99%',
            fsys: '红',
          },
          {
            id: '2',
            create_time: '2016-05-02 08:08:08',
            update_time: '2016-05-02 08:08:08',
            image: '/public/images/eh1.jpg',
            kfmc: '某珠宝公司',
            kflxr: '王先生',
            wpmc: '红宝石戒指',
            bjlx: '成品',
            number: '1',
            bjdh: 223,
            price: 20000,
            spzt: '审批中',
            wppl: '戒指',
            ks: '豪华',
            kh: 'WERWQE123',
            wpdj: 'A类',
            dw: '件',
            gjsp: '铂金999.99%',
            fsys: '红',
          }
        ],
        formData: {
          field101: null,
        },
        rules: {
          field101: [],
        },

        customerstaffs: [
          { typename: '员工一' },
          { typename: '员工二' },
          { typename: '员工三' },
          { typename: '员工四' },
        ],
        changeReason: [
          { typename: '原因一' },
          { typename: '原因二' },
          { typename: '原因三' },
          { typename: '原因四' },
        ],
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick (picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        customer: {
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },
        crmsclientStatic: [
          { id: 1, typename: 'A级' },
          { id: 2, typename: 'B级' },
          { id: 3, typename: 'C级' },
          { id: 4, typename: 'D级' },
        ],

        scheduleType: [
          { typename: '业务拓展' },
          { typename: '订单跟进' },
          { typename: '料/款跟进' },
        ],

        cates: [{ typename: '意向客户' }, { typename: '老客户' }],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],
        fullscreen: false,
      }
    },
    components: {
      'dialog-tools': 'url:../../tools/dialog-tools.vue',
      'dialog-search-customer': 'url:../search-customer.vue',
      'dialog-search-product': 'url:../search-product.vue',
      'search-product-and-baojia': 'url:../search-product-and-baojia.vue',
      'baojia-edit': 'url:../baojia-edit.vue',
      'baojia-add': 'url:../baojia-add.vue',
      //   'genjin-jilu': 'url:../genjin-jilu.vue',
      //   'customer-genji': 'url:../customer-genji.vue',
    },
  }
</script>
